<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
      <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<style>
    .form-control{
        width: 300px;
    }
    .tishi{
        color: red;
    }
</style>
</head>
<body>
    <form class="form-horizontal" style="width: 800px; height:550px; border: 1px solid #000; text-align: center; margin:auto; padding-top:30px;">
        <div class="form-group">
         <label for="inputEmail3" class="col-sm-2 control-label">昵称姓名</label>
         <div style="width:0%;" class="col-sm-10">
            <input type="text" class="form-control" placeholder="Text input" id="user_name" style="display:inline-block;">
            <span class="tishi" style="width:200px; height:20px; display: inline-block;"></span>
         </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10" >
               <input type="text" class="form-control" placeholder="Text input" >
            </div>
           </div>
           <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">手机号码 </label>
            <div  style="width:0%;" class="col-sm-10" >
               <input type="number" class="form-control" placeholder="Text input" id="phone" style="display:inline-block;">
               <span class="tishi" style="width:200px; height:20px; display: inline-block;"></span>
            </div>
           </div>   
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
          <div  style="width:0%;" class="col-sm-10">
            <input type="email" class="form-control" id="email" placeholder="Email" style="display:inline-block;">
            <span class="tishi" style="width:200px; height:20px; display: inline-block;"></span>
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
          <div  style="width:0%;" class="col-sm-10">
            <input type="password" class="form-control"  placeholder="Password" id="pwd" style="display:inline-block;">
            <span class="tishi" style="width:200px; height:20px; display: inline-block;"></span>
          </div>
        </div>
        <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">确认密码</label>
            <div  style="width:0%;" class="col-sm-10">
              <input type="password" class="form-control" placeholder="Password" id="cpwd" style="display:inline-block;">
              <span class="tishi" style="width:200px; height:20px; display: inline-block;"></span>
            </div>
          </div>
      </form>

    
      <script>
          $(function () {
    //昵称姓名
   $("#user_name").blur(function(){
       var txt = $(this).val()
       var reg = /^[\u4e00-\u9fa5]{1,}$/g
       if(txt==""){
           $(this).next().html('昵称姓名不能为空')
           return
       }
       if(!reg.test(txt)){
           console.log(reg.test(txt))
        $(this).next().html('内容不符合验证规则[纯汉字]')
        return 
       }
       $(this).next().html('输入正确')
       return
   })

   //手机号
    $('#phone').blur(function() {
        var number=$('#phone').val();
        var reg = /^1[2-9]\d{9}$/;
        if(number==""){
            $('#phone').next().html('输入不能为空')
            return
        }
        if (!reg.test(number)) {
            $('#phone').next().html('输入不符合格式')
            return
        }
        $('#phone').next().html('输入正确')
        return
    })

    // 邮箱
    $('#email').blur(function(){
        var vals=$('#email').val()
        var reMail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/g
        if (vals==''){
            $('#email').next().html('邮箱不能为空')
            return
        }
        if(reMail.test(vals))
        { $('#email').next().html('输入正确')
        }
        else
        {
            $('#email').next().html('你输入的邮箱格式不正确')
        
        }
  
    })

    //密码
    $('#pwd').blur(function(){
        var vals=$('#pwd').val()
       var reg =/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/
        if (vals==''){
            $('#pwd').next().html('密码不能为空')
            return
        }
        if(reg.test(vals)) {
             $('#pwd').next().html('输入正确')
         
        }
        else {
            $('#pwd').next().html('字母与数组组合6-12位')
        
        }
    
    })
    
    //确认密码
    $('#cpwd').blur(function(){
        var vals=$('#pwd').val()
        var cvals=$('#cpwd').val()
        if(cvals==''){
            $('#cpwd').next().html('重复密码框不能为空')
            return  
        }
        if (vals==cvals){
            $('#cpwd').next().html('输入正确')
        }
        else{
            $('#cpwd').next().html('两次密码输入不一致，请重新输入')
            return
        }
    })
    
   
      
    })

      </script>
</body>
</html>